<template>
  <transition
    @before-enter="beEnter"
    @enter="enter"
    @after-enter="afEnter"
    @before-leave="beLeave"
    @leave="leave"
    @after-leave="afLeave">
    <template v-if="mode === 'vshow'">
      <div v-show="isShow" class="collpase-transition">
        <slot></slot>
      </div>
    </template>
    <template v-if="mode === 'vif'">
      <div v-if="isShow" class="collpase-transition">
        <slot></slot>
      </div>
    </template>
    <!-- <div v-show="isShow" class="collpase-transition">
      <slot></slot>
    </div> -->
  </transition>
</template>

<script>
export default {
  name: 'CollapseTransition',
  props: {
    isShow: Boolean,
    // 更改工作模式
    mode: {
      type: String,
      default: 'vshow' // vif vshow
    }
    // transTime: {
    //   type: String,
    //   default: ''
    // }
  },
  methods: {
    beEnter (el) {
      if (!el.dataset) el.dataset = {}
      el.dataset.oldPaddingTop = el.style.paddingTop
      el.dataset.oldPaddingBottom = el.style.paddingBottom
      el.dataset.oldMarginTop = el.style.marginTop
      el.dataset.oldMarginBottom = el.style.marginBottom
      el.dataset.oldTransition = el.style.transition

      el.style.transition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out, 0.2s margin-top ease-in-out, 0.2s margin-bottom ease-in-out'
      el.style.height = '0'
      el.style.paddingTop = '0'
      el.style.paddingBottom = '0'
      el.style.marginTop = '0'
      el.style.marginBottom = '0'
    },
    enter (el) {
      el.dataset.oldOverflow = el.style.overflow
      if (el.scrollHeight !== 0) {
        el.style.height = el.scrollHeight + 'px'
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
        el.style.marginTop = el.dataset.oldMarginTop
        el.style.marginBottom = el.dataset.oldMarginBottom
      } else {
        el.style.height = ''
        el.style.paddingTop = el.dataset.oldPaddingTop
        el.style.paddingBottom = el.dataset.oldPaddingBottom
        el.style.marginTop = el.dataset.oldMarginTop
        el.style.marginBottom = el.dataset.oldMarginBottom
      }

      el.style.overflow = 'hidden'
    },
    afEnter (el) {
      el.style.transition = ''
      el.style.height = ''
      el.style.overflow = el.dataset.oldOverflow
      el.style.transition = el.dataset.oldTransition
    },
    beLeave (el) {
      if (!el.dataset) el.dataset = {}
      el.dataset.oldPaddingTop = el.style.paddingTop
      el.dataset.oldPaddingBottom = el.style.paddingBottom
      el.dataset.oldMarginTop = el.style.marginTop
      el.dataset.oldMarginBottom = el.style.marginBottom
      el.dataset.oldOverflow = el.style.overflow
      el.dataset.oldTransition = el.style.transition

      el.style.height = el.scrollHeight + 'px'
      el.style.overflow = 'hidden'
    },
    leave (el) {
      if (el.scrollHeight !== 0) {
        el.style.transition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out, 0.3s margin-top ease-in-out, 0.3s margin-bottom ease-in-out'
        el.style.height = '0'
        el.style.paddingTop = '0'
        el.style.paddingBottom = '0'
        el.style.marginTop = '0'
        el.style.marginBottom = '0'
      }
    },
    afLeave (el) {
      el.style.transition = el.dataset.oldTransition
      el.style.height = ''
      el.style.overflow = el.dataset.oldOverflow
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
      el.style.marginTop = el.dataset.oldMarginTop
      el.style.marginBottom = el.dataset.oldMarginBottom
    }
  }
}
</script>

<style lang="stylus" scoped>
.collpase-transition
  will-change height
</style>
